<template>
  <div class="page_vue">
    <!-- 标题 -->
    <navigation-title> </navigation-title>
    <div class="page_body">
      <div class="info_box">
        <el-form :model="FormTeamDatas" :rules="teamRules" label-position="top">
          <el-form-item :label="$t('teamDoc.info.subjection')">
            <div class="department">
              <div class="row_info">
                <div class="iconbg">
                  <svg-icon icon-class="dept2" />
                </div>
                <div>
                  <span>{{ FormTeamDatas.ownerDept }}/</span>
                  <span class="text_color">{{ FormTeamDatas.ownerName }}</span>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="14">
              <el-form-item :label="$t('teamDoc.teamName')"><el-input v-model="FormTeamDatas.teamName"
                  autocomplete="off" show-word-limit maxlength="32"
                  :disabled="isCreatePeopleBtn"></el-input></el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item :label="$t('teamDoc.spaceSize')">
                <!-- <template #label>
                  <span>{{ $t('teamDoc.spaceSize') }}</span>
                  <span class="space_size_limit">{{ $t('teamDoc.info.maxSize') }}{{ `(${spaceSizeLimitCount}
                    ${spaceSizeLimitUnit})` }}</span>
                </template> -->
                <div class="roomSize">
                  <el-input-number v-model="FormTeamDatas.roomSize" :min="1"
                    :disabled="isCreatePeopleBtn"></el-input-number>
                  <el-select v-model="FormTeamDatas.unitSize" placeholder="请选择" :disabled="isCreatePeopleBtn"
                    style="width: 80px;margin-left: 20px;">
                    <el-option v-for="(item, index) in sizeUnitList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label="$t('teamDoc.teamDescription')"><el-input v-model="FormTeamDatas.instructions"
              class="textareaClass" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" show-word-limit
              maxlength="80" :disabled="isCreatePeopleBtn"></el-input></el-form-item>
        </el-form>
        <div class="create_box">
          <el-button type="primary" @click="confirmClick()" :disabled="isCreatePeopleBtn"> {{ $t('commen.confirm') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import navigationTitle from '../components/newUiModule/navigation-title.vue'
import { apiCoreConfigGetByConfigCode, apiTeamGetInformation, apiTeamUpdate } from '@/api/teamKnowdge/teamDocApi'
import router from '@/router'
import useUserStore from '@/store/modules/user'
const route = useRoute()
const { proxy } = getCurrentInstance() as any
const userStore = useUserStore()
const FormTeamDatas = reactive({
  teamName: "",
  roomSize: "5",
  unitSize: "GB",
  ownerName: "",
  ownerDept: "",
  managers: "",
  instructions: ""
})
const sizeUnitList = ref([
  { label: "GB", value: "GB" },
  { label: "TB", value: "TB" }
])
const teamRules = reactive({

})
const teamId = ref("")
interface TeamInfo {
  teamName: string
  space: string
  instructions: string
  owner: string
  ownerName: string
  ownerDept: string
}

const teamInfo = ref<TeamInfo>({
  teamName: "",
  space: "",
  instructions: "",
  owner: "",
  ownerName: "",
  ownerDept: ""
})
const spaceSizeLimitCount = ref(0)
const spaceSizeLimitUnit = ref("GB")
const isCreatePeopleBtn = ref(false)

onMounted(() => {
  teamId.value = route.query.teamId as string
  getTeamInfo()
  // getBigBity()
})

const getBigBity = async () => {
  const res = await apiCoreConfigGetByConfigCode({
    configCode: "TEAM_MAXSIZE"
  })
  if (res.code == 200) {
    spaceSizeLimitCount.value = res.data.configValue
    spaceSizeLimitUnit.value = res.data.configUnit
  }
}
const getTeamInfo = async () => {
  const res = await apiTeamGetInformation({
    id: teamId.value
  })
  if (res.code == 200) {
    teamInfo.value = res.data
    const { teamName, space, instructions, owner, ownerName, ownerDept } = teamInfo.value
    const { size, unit } = proxy.$yuUtils.getByteUnit(space)
    Object.assign(FormTeamDatas, {
      teamName: teamName,
      roomSize: size,
      unitSize: unit,
      instructions: instructions,
      managers: owner,
      ownerName: ownerName,
      ownerDept: ownerDept
    })
    isCreatePeopleBtn.value = !(userStore.userId == res.data.owner)
  }
}
const confirmClick = async () => {
  let requestData = {
    space: proxy.$yuUtils.unitBigToSmall(FormTeamDatas.roomSize, FormTeamDatas.unitSize),
    // space: 5368709120,
    teamName: FormTeamDatas.teamName,
    // managersName: this.FormTeamDatas.managersName,
    managers: FormTeamDatas.managers,
    instructions: FormTeamDatas.instructions,
    id: teamId.value
  }
  const res = await apiTeamUpdate(requestData)
  if (res.code == 200) {
    ElMessage.success('操作成功')
    router.push('/newUi/teamKnowdge/teamDoc')
  }


}

</script>

<style scoped lang="scss">
.page_vue {
  .page_body {
    padding: 30px;
  }

  .info_box {
    max-width: 663px;

    :deep(.el-form-item__label) {
      color: #3d3d3d;
      font-family: "Microsoft YaHei";
      padding-bottom: 5px;
    }
  }

  .department {
    width: 100%;
    height: 33px;
    background: #f5f5f5;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #eeeeee;

    .row_info {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      margin-left: 12px;
      color: #afafaf;
    }

    .text_color {
      color: #3d3d3d;
    }

    .iconbg {
      width: 22px;
      height: 22px;
      line-height: 22px;
      border-radius: 10px;
      background-color: #6698ff;
      color: #fff;
      margin: 0px 5px;
      text-align: center;

      .icon_size {
        font-size: 13px;
      }
    }
  }

  .roomSize {
    display: flex;
    align-items: center;

    :deep(.el-input-number__decrease) {
      background-color: #fff !important;
    }

    :deep(.el-input-number__increase) {
      background-color: #fff !important;
    }
  }

  .create_box {
    :deep(.el-button--small) {
      padding: 9px 30px;
    }

    :deep(.el-button--primary) {
      background-color: #6698ff;
      border-color: #6698ff;
    }

    .el-button--primary.is-disabled {
      color: #fff;
      background-color: #94b7fd;
      border-color: #94b7fd;

      &:hover {
        box-shadow: none;
      }
    }

    :deep(.el-button--primary:focus) {
      box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
    }

    :deep(.el-button--primary:hover) {
      box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
    }
  }

  .space_size_limit {
    font-size: 12px;
    margin-left: 10px;
  }
}
</style>